<!-- 案例卡片组件 -->
<template>
  <div class="CaseCard">
    <div class="CaseCard_s">
      <!-- 上 -->
      <div class="CaseCard_up">
        <h4>{{ title }}</h4>
        <p>{{ titleY }}</p>
        <img :src="image" alt="" />
      </div>
      <!-- 中间 -->
      <div class="CaseCard_conter">
        {{ paragraph }}
      </div>
      <!-- 下 -->
      <div class="CaseCard_down">
        <p>All</p>
        <div class="line"></div>
      </div>
    </div>
    
  </div>
  
</template>

<script>
export default {
  components: {},
  props: ["title", "titleY", "image", "paragraph"],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>
<style lang='less' scoped>
.CaseCard {
  .CaseCard_s {
    width: 23vw;
    height: 50vh;
    background-image: url("./img/01jx.png");
    background-size: 100% 100%;
  }
  // 上
  .CaseCard_up {
    width: 22.9vw;
    height: 30vh;
    background-image: url("./img/03bj.png");
    background-size: 100% 100%;
    padding-top: 2vh;
    position: relative;
    h4 {
      font-size:0.43rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      margin-left: 2vw;
    }
    p {
      font-size:0.18rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fefefe;
      margin-left: 2vw;
    }
    img {
      width: 3vw;
      position: absolute;
      right: 3vh;
      top: 22vh;
    }
  }
  // 中
  .CaseCard_conter {
    width: 88%;
    margin: 0 auto;
    margin-top: 3vh;
    font-size:0.16rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #fefefe;
    line-height: 3vh;
    opacity: 0.8;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  // 下
  .CaseCard_down {
    max-width:0.3rem;
    max-height:0.2rem;
    margin-left:0.26rem;
    margin-top: 2vh;
    p {
      font-size:0.14rem;
      font-family: Myriad Pro;
      font-weight: bold;
      color: #ffffff;
      margin-left:0.05rem;
    }
    .line {
      width:1.5vw;
      height: 0.3vh;
      background: #00d5ff;
      margin: 0 auto;
    }
  }
}
</style>